import React, { useState, memo, useTransition } from 'react'

export default function App() {
  const [tab, setTab] = useState('home')
  const [isPending, startTransition] = useTransition()
  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab)
    })

  }
  return (
    <div>
      <div>
        <TabButton isActive={tab === 'home'} onclick={() => { selectTab('home') }}>Home</TabButton>
        <TabButton isActive={tab === 'article'} onclick={() => { selectTab('article') }}>{isPending ? 'Loading....' : 'Article'}</TabButton>
        <TabButton isActive={tab === 'about'} onclick={() => { selectTab('about') }}>About</TabButton>
      </div>
      {tab === 'home' && <HomeTab />}
      {tab === 'about' && <AboutTab />}
      {tab === 'article' && <ArticleTab />}
    </div>
  )
}
const TabButton = ({ children, isActive, onclick }) => {
  const buttonStyle = {
    background: isActive ? 'blueviolet' : 'red',
    border: '1px solid blue',
    padding: '8px 16px',
    margin: '0 4px',
    cursor: 'pointer'
  }
  return (
    <button style={buttonStyle} onClick={onclick}>
      {children}
    </button>
  )
}
const HomeTab = () => {
  return <div>
    <h1>我是home组件的内容哈哈哈哈</h1>
  </div>
}
const AboutTab = () => {
  return <div>
    <h1>我是about组件的内容哈哈哈哈</h1>
  </div>
}
const ArticleTab = memo(
  () => {
    let item = []
    for (let i = 0; i < 100; i++) {
      item.push(<SlowArt key={i} index={i} />)

    }
    return <ul>{item}</ul>
  }
)
const SlowArt = ({ index }) => {
  let startTime = performance.now()
  while (performance.now() - startTime < 10) {

  }
  return <li>我是文章:{index + 1}</li>
}


